<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在线下单</title>
    <link rel="stylesheet" href="/js/elementui/index.css">
    <script src="/js/vue/vue.js"></script>
</head>
<body>
<!--树形结构-->
<div id="app">
    <el-container>
        <el-aside width="200px" >
            <h2>供应商管理</h2>
            <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree>
        </el-aside>
        <el-main>
            <el-table
                    :data="tableData"
                    style="width: 100%">
                <el-table-column
                        label="产品编号"
                >
                    <template slot-scope="scope">
                        <span >{{ scope.row.productNumber }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="产品名称"
                >
                    <template slot-scope="scope">
                        <span >{{ scope.row.productName }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="商品图片"
                >
                    <template slot-scope="scope">
                        <img style="width: 100px;height: 100px" v-bind:src="scope.row.productImg">
                    </template>
                </el-table-column>
                <el-table-column
                        label="价格"
                >
                    <template slot-scope="scope">
                        <span >{{ scope.row.productPrice }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="销量   "
                >
                    <template slot-scope="scope">
                        <span >{{ scope.row.productPrice }}</span>
                    </template>
                </el-table-column>
                <el-table-column
                        label="描述"
                >
                    <template slot-scope="scope">
                        <span >这是好东西，买它！！！！</span>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="lookEdit(scope.$index,scope.row)">查看</el-button>
                        <el-button
                                size="mini"
                                @click="userSales(scope.$index,scope.row)">购买</el-button>

                    </template>
                </el-table-column>
            </el-table>
            <!--分页按钮-->
            <el-pagination
                    small
                    layout="prev, pager, next"
                    @current-change="loadPage"
                    :total="total"
                    :current-page="current"
                    :page-size="pageSize">
            </el-pagination>

            <el-dialog title="确认购买" :visible.sync="dialogFormVisible" @close="closeMyDialog">
                <el-form :model="product">
                    <el-form-item label="产品id" :label-width="formLabelWidth">
                        <el-input v-model="product.id"  autocomplete="off" readonly="readonly"></el-input>
                    </el-form-item>

                    <el-form-item label="产品价格" :label-width="formLabelWidth">
                        <el-input v-model="product.productPrice"  autocomplete="off" readonly="readonly"></el-input>
                    </el-form-item>

                    <el-form-item label="产品名称" :label-width="formLabelWidth">
                        <el-input v-model="product.productName"  autocomplete="off" readonly="readonly"></el-input>
                    </el-form-item>

                    <el-form-item label="产品数量" :label-width="formLabelWidth">
                        <el-input-number v-model="num" @change="handleChange" :min="0" :max="Infinity" label="描述文字"></el-input-number>
                    </el-form-item>

                    <el-form-item label="预计花费" :label-width="formLabelWidth">
                        <el-input v-model="price"  autocomplete="off" readonly="readonly"></el-input>
                    </el-form-item>


                </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="saveUser()">确定购买</el-button>
                </div>
            </el-dialog>
        </el-main>

    </el-container>

</div>
<script src="/js/axios/axios.min.js"></script>
<script src="/js/qs/qs.min.js"></script>
<!-- 引入组件库 -->
<script src="/js/elementui/index.js"></script>
<script>
    new Vue({
        el:'#app',
        data() {
            return {
                defaultProps: {
                    children: 'children',
                    label: 'label'
                },
                data: [
                    {
                    label: '花海iaitiat',
                    children: [{
                        label: '蔬菜水果',
                        children: [{
                            label: '蔬菜'
                        },{
                            label: '苹果'
                        },{
                            label: '大蒜'
                        },{
                            label: '白菜'
                        },{
                            label: '青菜'
                        }]
                    },
                        {
                        label:'手机数码',
                        children:[{
                            label:'手机',
                        },{
                            label:'相机'
                        }]
                    },
                        {
                        label:'电脑配件',
                        children:[{
                            label:'cpu'
                        },{
                            label:'显卡'
                        }]
                    }]
                    },
                    {
                        label: '花海iaitiat',
                        children: [{
                            label: '蔬菜水果',
                            children: [{
                                label: '蔬菜'
                            },{
                                label: '苹果'
                            },{
                                label: '大蒜'
                            },{
                                label: '白菜'
                            },{
                                label: '青菜'
                            }]
                        },
                            {
                                label:'手机数码',
                                children:[{
                                    label:'手机',
                                },{
                                    label:'相机'
                                }]
                            },
                            {
                                label:'电脑配件',
                                children:[{
                                    label:'cpu'
                                },{
                                    label:'显卡'
                                }]
                            }]
                    },
                    {
                        label: '花海iaitiat',
                        children: [{
                            label: '蔬菜水果',
                            children: [{
                                label: '蔬菜'
                            },{
                                label: '苹果'
                            },{
                                label: '大蒜'
                            },{
                                label: '白菜'
                            },{
                                label: '青菜'
                            }]
                        },
                            {
                                label:'手机数码',
                                children:[{
                                    label:'手机',
                                },{
                                    label:'相机'
                                }]
                            },
                            {
                                label:'电脑配件',
                                children:[{
                                    label:'cpu'
                                },{
                                    label:'显卡'
                                }]
                            }]
                    }],
                tableData:null,
                line:null,
                role:null,
                total:0,
                current:1,
                num: 0,
                price:0,
                pageSize:10,
                formLabelWidth:"120px",
                dialogFormVisible:null,
                product:{
                    id:'',
                    productPrice:'',
                    productName:'',
                    num:0,
                    price:''
                }
            };
        },
        methods: {
            handleNodeClick(data) {
                console.log(data);
            },
            loadPage(current)
            {
                this.current = current;
                axios.get("/purchaseProduct/" + current).then(value => {
                    if (value.data.code == 1) {
                        this.tableData = value.data.data.records;
                        this.total = value.data.data.total;
                        this.current = value.data.data.current;
                        this.pageSize = value.data.data.pageSize;
                }
                });
            },
            lookEdit(index,row){
                console.log(index)
                console.log(row)
                axios.get("/productOne/"+row.id).then(value => {
                   if (value.data.code==1){

                   }
                    location.href="/products/ProductOne";
                });
            },
            userSales(index,row){
                this.dialogFormVisible=true
                axios.get("/purchase/Product/" + row.id).then(value => {
                    if (value.data.code == 1){
                        this.product=value.data.data;
                    }
                })
            },
            closeMyDialog(){
                this.product={   //关闭对话框时更改product属性
                    id:'',
                    productPrice:'',
                    productName:'',
                }
                this.num=0;
                this.price=0;
            },
            saveUser(){
                var person={
                    productName:this.product.productName,
                    demandQuantity:this.num,
                    estimatedCost:this.price,
                    id:this.product.id,
                    paymentMethod:'线上支付',
                }
                axios.post("/apply",person).then(value => {
                    if(value.data.code == 1){
                        this.$message(value.data.msg);
                    }
                });
                location.href="/buy/apply_list";
            },
            handleChange(value) {
                this.price=value*this.product.productPrice
            }

        },
        mounted(){
            this.loadPage(1);
        }
    });

</script>

</body>
</html>